<template>
    <div id="TextTimeSync" ref="TextTimeSync" class="TextTimeSync">
        <div class="textLable">
        <span style="color: rgb(255, 222, 51)">
            <p>
                系统名称: <span style="color: rgb(229, 230, 250)">{{this.systemName}} </span>
            </p>
            <p>
                实例名: <span style="color: rgb(229, 230, 250)">{{this.instanceName}} </span>
            </p>
            <p>
                数据库时间: <span style="color: rgb(229, 230, 250)">{{this.databaseTime}} </span>
            </p>
            <p>
                基准时间: <span style="color: rgb(229, 230, 250)">{{this.referenceTime}} </span>
            </p>
            <p>
                时间差（分钟）: <span style="color: rgb(229, 230, 250)">{{Number(calcChu(this.timeDifference, 60)).toFixed(1)}} </span>
            </p>
        </span>
        </div>
    </div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'timeSync',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "9B86A82E27A3473F9D0F1DF46C9A6790",
                },
            },
            systemName: '',
            instanceName: '',
            databaseTime: '',
            referenceTime: '',
            timeDifference: '',
            TextTimeSync: {},
            timerName: 'TextTimeSync',
            timerEventName: 'timerTextTimeSync',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
    },
    mounted() {
        
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                this.systemName = res.data[0].SYSTEMNAME;
                this.instanceName = res.data[0].DB_SID;
                this.databaseTime = res.data[0].REMOTE_SYSDATE;
                this.referenceTime = res.data[0].LOCAL_SYSDATE;
                this.timeDifference = res.data[0].DATE_DIFF
            });
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>
.TextTimeSync{
    /* height: 150px; */
    /* border : 5px solid red */

}
.textLable{
    padding: 10px;
}
</style>